<!--
 * @Author: daidai
 * @Date: 2022-03-01 14:13:04
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-27 15:04:49
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-top.vue
-->
<template>
  <Echart
    id="rightTop"
    :options="option"
    class="right_top_inner"
    v-if="pageflag"
    ref="charts"
  />
  <Reacquire v-else @onclick="getData" style="line-height: 200px">
    重新获取
  </Reacquire>
</template>

<script>
import { currentGET } from "api/modules";
import {graphic} from "echarts"
export default {
  data() {
    return {
      option: {},
      pageflag: false,
      timer: null,
    };
  },
  created() {
   
  },

  mounted() {
     this.getData();
  },
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    getData() {
      this.pageflag = true;
      // this.pageflag =false
      currentGET("big4").then((res) => {
        if (!this.timer) {
          console.log("优秀标注员荣誉榜", res);
        }
        if (res && res.code === 200 && res.data) {
          this.countUserNumData = res.data;
          this.$nextTick(() => {
            this.init(res.data.nameList || [], res.data.countList || [], res.data.month),
              this.switper();
          });
        } else {
          this.pageflag = false;
          this.$Message({
            text: res.message || '获取数据失败',
            type: "warning",
          });
        }
      }).catch(error => {
        console.error('优秀标注员数据请求失败:', error);
        this.pageflag = false;
      });
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = (a) => {
        this.getData();
      };
      this.timer = setInterval(
        looper,
        this.$store.state.setting.echartsAutoTime
      );
      let myChart = this.$refs.charts.chart;
      myChart.on("mouseover", (params) => {
        this.clearData();
      });
      myChart.on("mouseout", (params) => {
        this.timer = setInterval(
          looper,
          this.$store.state.setting.echartsAutoTime
        );
      });
    },
    init(xData, yData, month) {
      // 默认月份（如果后端未返回）
      const displayMonth = month || new Date().getMonth() + 1;
      
      this.option = {
        title: {
          text: `${displayMonth}月份优秀标注员`,
          left: "center",
          top: "5px",
          textStyle: {
            color: "#7EB7FD",
            fontSize: 14,
            fontWeight: "bold",
          },
        },
        xAxis: {
          type: "category",
          data: xData, // 标注员姓名
          axisLine: {
            lineStyle: {
              color: "rgba(31,99,163,.5)",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#7EB7FD",
            fontWeight: "500",
            interval: 0, // 显示所有标签
            rotate: 30, // 旋转角度
          },
        },
        yAxis: {
          type: "value",
          name: "标注数量",
          nameTextStyle: {
            color: "#7EB7FD",
            fontSize: 12,
          },
          min: 2000,
          max: 10000,
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(31,99,163,.2)",
            },
          },
          axisLine: {
            lineStyle: {
              color: "rgba(31,99,163,.5)",
            },
          },
          axisLabel: {
            color: "#7EB7FD",
            fontWeight: "500",
          },
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF",
          },
          axisPointer: {
            type: "shadow",
          },
          formatter: function (params) {
            return (
              `${displayMonth}月份<br/>` +
              params[0].name +
              "<br/>" +
              "标注数量：" +
              params[0].value
            );
          },
        },
        grid: {
          show: true,
          left: "15px",
          right: "20px",
          bottom: "15px",
          top: "45px",
          containLabel: true,
          borderColor: "#1F63A3",
        },
        series: [
          {
            data: yData,
            type: "bar",
            barWidth: "40%",
            name: "标注数量",
            itemStyle: {
              borderRadius: [8, 8, 0, 0],
              color: new graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(9,202,243,1)",
                },
                {
                  offset: 1,
                  color: "rgba(9,202,243,0.3)",
                },
              ]),
            },
            label: {
              show: true,
              position: "top",
              color: "#09CAF3",
              fontSize: 12,
              fontWeight: "bold",
            },
            // 添加动效
            animationDuration: 2000,
            animationEasing: "elasticOut",
          },
        ],
      };
    },
  },
};
</script>
<style lang='scss' scoped>
.right_top_inner {
  margin-top: -8px;
}
</style>